<script setup lang="ts">
import { useUserStore } from '@/stores/userStote'; 
import { Edit } from '@element-plus/icons-vue';
const userStore = useUserStore()


</script>
<template>
  <div class="user-profile">

    <el-card class="box-card">
      <template #header>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <el-button @click="$router.push('/updateuser')" type="primary" :icon="Edit" plain size="large">修改信息</el-button>

      <el-descriptions
        title="用户信息"
        direction="vertical"
        :border="true"
        style="margin-top: 20px"
      >
        <el-descriptions-item
          :rowspan="2"
          :width="140"
          label="头像"
          align="center"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="userStore.userInfo?.photo"
          />
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{ userStore.userInfo?.name }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ userStore.userInfo?.id }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ userStore.userInfo?.gender ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ userStore.userInfo?.birthday }}</el-descriptions-item>
        <el-descriptions-item label="个人介绍">
          {{ userStore.userInfo?.intro }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>


<style scoped>
.box-card{
  padding-bottom: 50px;
}
.user-profile {
  padding: 20px;
}



</style>